<template>
    <div>
        <div class="table_wrap" ref="table">
            <div class="config_title">
                <div class="config_title_flex">
                    <p class="config_title_zi">
                        网络设备
                    </p>
                    <div class="config_title_set" style="margin-right: 30px;">
                        <p :class="this.autoBind ? 'conspangray':'conspanliang'">手动绑定</p>
                        <el-switch v-model="autoBind"
                        active-color="#486885" :disabled="this.loading == true"
                        inactive-color="#bfc0c4"
                        @change="getBind()"></el-switch>
                        <p :class="this.autoBind ? 'conspanliang':'conspangray'">自动绑定</p>
                    </div>
                    <div class="config_title_set" >
                        <p :class="this.autoIp ? 'conspangray':'conspanliang'">手动分配IP</p>
                        <el-switch v-model="autoIp"
                        active-color="#486885" :disabled="this.loading == true"
                        inactive-color="#bfc0c4"
                        @change="getIp()"></el-switch>
                        <p :class="this.autoIp ? 'conspanliang':'conspangray'">自动分配IP</p>
                        <el-button class="consetip" v-if="this.autoIp" size="mini" style="margin:0px 10px 0px 10px;" @click="range()">范围配置</el-button>
                    </div>
                </div>
                <p>
                    <span style="margin-right: 20px;">在线设备数量：{{this.cslist3.length}}</span>
                    <span style="margin-right: 20px;">当前设备数量：{{this.cslist2.length}}</span>
                    <el-button type="primary" :disabled="this.loading == true" style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="handleDelete()">
                        <span>一键删除</span>
                    </el-button>
                    <el-button type="primary" :disabled="this.loading == true" style="margin-left: 20px;width: 110px; padding: 12px 5px;" @click="scan()">
                        <span>设备扫描</span>
                        <i class="el-icon-loading" style="margin-left: 5px;" v-show="this.hand"></i>
                    </el-button>
                </p>
            </div>
            <div style="position: relative;">
                <el-button v-if="autoBind == false" class="consetjb" :disabled="this.loading == true" size="mini" style="margin:0px 10px 0px 10px;" @click="unbind()">一键停用</el-button>
            </div>
            <el-table
            :data="this.cslist2"
            v-loading="loading"
            element-loading-text="正在删除设备……"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.45)"
            style="width: 100%"
            height="830"
            class="con_table"
            :row-style="getRowClass" 
            :cell-style="getRowClass"
            :header-row-style="getRowClass" 
            :span-method="objectSpanMethod"
            :header-cell-style="getHeaderClass">
                <el-table-column
                label="设备类型"
                width="160">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px;cursor: default;" :title="scope.row.typename" >{{ scope.row.typename }}</span>
                    </template>
                </el-table-column>
                <el-table-column  
                label="定位" 
                width="80">
                    <template slot-scope="scope">
                        <div class="confixed" @click="changeValue(scope.$index, scope.row, 'flash')">
                             <i :class="scope.row.flash == 0 ? 'el-icon-location':'el-icon-location confiexd_warning'"></i>
                             <i class="el-icon-thumb"></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                label="设备名称">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'name')" maxlength="20"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                label="IP地址"
                width="150"
                header-align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.ip" :disabled="autoIp == true" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'ip')"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                label="子网掩码"
                width="150"
                header-align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.mask" :disabled="autoIp == true" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'mask')"></el-input>
                    </template>
                </el-table-column><el-table-column
                label="网关"
                width="150"
                header-align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.gw" :disabled="autoIp == true" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'gw')"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                label="端口号"
                width="90">
                    <template slot-scope="scope"> 
                        <el-input v-model="scope.row.port" :disabled="autoIp == true" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'port')"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                label="地址"
                width="90">
                    <template slot-scope="scope">
                        <span style="cursor: default;color: #8b8f99;">{{ scope.row.addr }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                label="接入时间"
                header-align="center"
                width="180">
                    <template slot-scope="scope">
                        <span style="cursor: default;color: #8b8f99;">{{ scope.row.connecttime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                label="连接时间"
                width="100">
                    <template slot-scope="scope">
                        <span class="conlist_time" :style="scope.row.linktime <= 2000 ? 'color: #58ca87;':'color:#c73131'">{{ scope.row.linktime.toFixed(0) }}&nbsp;<span style="font-size: 12px;">ms</span></span>
                    </template>
                </el-table-column>
                <el-table-column
                label="访问时间ms"
                width="100">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.checktime" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'checktime')"></el-input>
                    </template>
                </el-table-column>
                <el-table-column  
                label="启用/停用" 
                width="180">
                    <template slot-scope="scope">
                        <el-switch
                            @change="changeValue(scope.$index, scope.row, 'ready')"
                            v-model="scope.row.ready"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                label="操作" 
                header-align="center"
                width="90">
                    <template slot-scope="scope">
                        <div class="caozuo">
                            <i class="el-icon-delete" @click="changeValue(scope.$index, scope.row,'dele')"></i>
                            <!-- <el-button type="primary" size="mini" title="解绑定" :disabled="autoBind == true" v-if="scope.row.devreg != 0" @click="changeValue(scope.$index, scope.row,'devreg',2)">解绑定</el-button>
                            <el-button type="primary" size="mini" title="绑定" :disabled="autoBind == true" v-if="scope.row.devreg == 0" @click="changeValue(scope.$index, scope.row,'devreg',1)">绑定</el-button> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog  :visible.sync="dialogVisible" title="IP范围配置"  :append-to-body="true">
            <div>
                <el-form :model="form"  :rules="rules"   label-width="100px">
                    <el-form-item label="起始IP地址" prop="ipStart">
                        <el-input class="config_form" v-model="form.ipStart" placeholder="请输入IP地址(例如192.168.1.55)"  @blur="numBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="终止IP地址"  prop="ipend">
                        <el-input class="config_form" v-model="form.ipend" @blur="endBlur()"></el-input>
                        <p class="zhushi">*请修改IP地址最后一位(起始地址~255)</p>
                    </el-form-item>
                    <el-form-item label="子网掩码"  prop="mask">
                        <el-input class="config_form" v-model="form.mask"></el-input>
                    </el-form-item>
                    <el-form-item label="网关"  prop="gateway">
                        <el-input class="config_form" v-model="form.gateway"></el-input>
                        <p class="zhushi">*网关与子网掩码默认会跟随IP地址的设置自动生成，若不符合需求可手动修改</p>
                    </el-form-item>
                    <el-form-item label="端口号"  prop="port">
                        <el-input class="config_form" v-model="form.port"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
         /*ip正则验证*/
         var validcodeip = (rule, value, callback) => {
            const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('输入格式不合法！'));
            }
        };
        return{
            rules: {
                ipStart: [{validator:validcodeip,trigger:'blur'}],
            },
            form:{
                ipStart: '',
                ipend: '',
                mask: '',
                gateway:'',
                port:''
            },
            layout0:{},//系统信息（自动分配绑定）
            cslist:[],
            autoBind:true,
            autoIp:true,
            cslist2:[],
            cslist3:[],//在线设备
            loading: false,
            dialogVisible:false,
            hand:false,
            timeGetData:'',//接口方法的定时器
            timeSysData:'',//接口方法的定时器
        }
    },
    created(){
        //6秒后执行定时器进行接口循环
        this.getDataStart()
        this.getSystem()
    },
    methods: {
        // 自动分配绑定状态获取
        getSystem(){
            var params = {
                "getlayout":"layout0",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.layout0 == undefined){
                    // 停止循环接口
                    clearInterval(this.timeSysData);
                    this.timeSysData = null;
                    this.$nextTick(() => {
                        this.timeSysData = setInterval(() => {
                            this.getSystem()
                        }, 3000); 
                    })
                }else{
                    // 停止循环接口
                    clearInterval(this.timeSysData);
                    this.timeSysData = null;
                    var data = JSON.parse(res.data.layout0)
                    this.layout0 = data
                    this.form.ipStart = data.dhcpfip //起始地址
                    this.form.ipend = data.dhcplip //终止地址
                    this.form.port = data.dhcpport //端口号
                    this.form.mask = data.dhcpmask //网关
                    this.form.gateway = data.dhcpgw //子网掩码
                    //绑定
                    if(data.autoconect==0){
                        this.autoBind = true
                    }else{
                        this.autoBind = false
                    }
                    //分配
                    if(data.dhcpenable==0){
                        this.autoIp = true
                    }else{
                        this.autoIp = false
                    }
                } 
            });
        },
        //绑定状态修改（自动手动）
        getBind(){
            if(this.autoBind==true){
                this.layout0.autoconect = 0
            }else{
                this.layout0.autoconect = 1
            }
            var params = {
                "setlayout":"layout0",
                "layout":JSON.stringify(this.layout0),
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                   if(res.data.result !== 'ok'){
                    }else{
                        this.getSystem()
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 1500
                        });
                    }
            });
        },
        //分配状态修改（自动手动）
        getIp(){
            if(this.autoIp==true){
                this.layout0.dhcpenable = 0
            }else{
                this.layout0.dhcpenable = 1
            }
            var params = {
                "setlayout":"layout0",
                "layout":JSON.stringify(this.layout0),
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                   if(res.data.result !== 'ok'){
                    }else{
                        this.getSystem()
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 1500
                        });
                    }
            });
        },
        scan(){
            this.hand = true
            setTimeout(()=>{
                this.hand = false
            },1000)
            // 设备扫描接口
            var params = {
                "devreset":0,//值随机，不做具体参数
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    this.$notify({
                        title: '扫描成功',
                        type: 'success',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '扫描失败',
                        type: 'warning',
                        duration: 1500
                    });  
                }
            });
            
        },
        range(){
            this.dialogVisible = true
        },
        numBlur(){
            //截取ip前三段
            var _str = this.form.ipStart;
            var index = _str.lastIndexOf(".");
            _str = _str.substring(0, index);
            this.form.ipend = _str + '.250'
            this.form.gateway = _str + '.1'
            this.form.mask = '255.255.255.0'
        },
        endBlur(){
            // 起始地址最后一位
            var _str = this.form.ipStart;
            var index = _str.lastIndexOf(".");
            var last = Number(_str.substring(index+1, _str.length));
            // 终止地址最后一位
            var _str2 = this.form.ipend;
            var index2 = _str2.lastIndexOf(".");
            var qian = _str.substring(0, index);
            var last2 = Number(_str2.substring(index2+1, _str2.length))
            if(last2 > 255){
                this.form.ipend = qian + '.255'
                this.$notify({
                    title: '终止地址不能大于255',
                    type: 'warning',
                    duration: 1500
                });  
            }else{
                if(last2 <= last){
                    this.form.ipend = qian + '.250'
                    this.$notify({
                        title: '终止地址不能小于起始地址',
                        type: 'warning',
                        duration: 1500
                    });  
                }else{
                }
            }
        },
        getRowClass(row){
            if(row.rowIndex%2 == 0){
                return `background:none ;
                border:none;
                border-bottom:1px solid #ebeef53d;
                `;
            }else{
                
                return `background:rgba(255, 255, 255, 0.05) ;
                border:none;
                border-bottom:1px solid #ebeef53d;
                `;
            }
        },
        getHeaderClass(){
            return `background:none ;
                border:none ;
                `;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                const _row = this.flitterData(this.cslist2).one[rowIndex]
                return {
                    rowspan: _row,
                    colspan: 1,
                }
            }
        },
         // 合并方法
        flitterData(arr) {
            let spanOneArr = [],
            spanTwoArr = [],
            concatOne = 0
            arr.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                    spanTwoArr.push(1)
                } else {
                    // 只需要将 span_name 修改为自己需要合并的字段名即可
                    if (item.type === arr[index - 1].type) {
                        //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }
                }
            })
            return {
                one: spanOneArr,
            }
        },
        changeValue(index, value, mode){
            var params = {
                "setdevinfo":[
                    {
                        "uid":value.uid,
                        "type":value.type,
                        "addr":value.addr,
                        [mode]:value[mode]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            
            if(mode == 'flash'){//定位
                if(value.flash == 0){ //状态处于关闭定位，点击触发打开定位，需要关闭其他定位
                    var arr = [
                        {
                            "uid":value.uid,
                            "type":value.type,
                            "addr":value.addr,
                            flash:1
                        }
                    ]
                    for(var a = 0; a < this.cslist2.length; a++){
                        if(a != index){
                            if(this.cslist2[a].flash == 1){
                                var st = {
                                    "uid":this.cslist2[a].uid,
                                    "type":this.cslist2[a].type,
                                    "addr":this.cslist2[a].addr,
                                    "flash":0
                                }
                                arr.push(st)
                                // 接口下发数组整理 
                            }
                        }
                    }
                    params.setdevinfo = arr
                    this.cslist2[index].flash = 1
                    localStorage.setItem("定位", JSON.stringify(this.cslist2[index]));
                }else if(value.flash == 1){//状态处于打开定位，点击触发关闭定位
                    var arr = [
                        {
                            "uid":value.uid,
                            "type":value.type,
                            "addr":value.addr,
                            flash:0
                        }
                    ]
                    params.setdevinfo = arr
                    this.cslist2[index].flash = 0
                }
            }else if(mode == 'ready'){
                if(value.ready == true){
                    params.setdevinfo[0].ready = 1
                }else{
                    params.setdevinfo[0].ready = 0
                }
            }else if(mode == 'checktime'){
                params.setdevinfo[0].checktime = Number(value.checktime)*1000
            }else if(mode == 'port'){
                params.setdevinfo[0].port = Number(value.port)
            }else if(mode == 'dele'){ //删除设备
                this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    var timer = setTimeout(() => {
                        if(this.loading == true){
                            this.loading = false
                            this.$notify({
                                title: '删除失败',
                                type: 'warning',
                                duration: 1500
                            });
                        }
                    }, 2000);
                    params = {
                        "deletedev":[{
                            "uid":value.uid,
                            "type":value.type,
                            "addr":value.addr
                        }],
                        [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                    }
                    this.$http.post(this.$baseUrl, params).then((res) => {
                        // 清除定时器
                        clearTimeout(timer);
                        this.loading = false
                        if(res.data.result == 'ok'){
                            this.$notify({
                                title: '删除成功',
                                type: 'success',
                                duration: 1500
                            });
                        }else{
                            this.$notify({
                                title: '删除失败',
                                type: 'warning',
                                duration: 1500
                            });
                        }
                    });
                }).catch(() => {
                    this.$notify({
                        title: '已取消删除',
                        type: 'warning',
                        duration: 1500
                    });        
                });
            }
            if(mode != 'dele'){
                this.$http.post(this.$baseUrl, params).then((res) => {
                    if(res.data.result !== 'ok'){
                        this.$notify({
                            title: '保存失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }else{
                    }
                });
            }
            
        },
        //一键解绑
        unbind(){
            this.$confirm('此操作将一键停用所有设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var params = {
                    "setdevinfo":[],
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                for(var a = 0; a < this.cslist2.length; a++){
                    if(this.cslist2[a].ready == true){
                        this.cslist2[a].ready = false
                        var st = {
                            "uid":this.cslist2[a].uid,
                            "type":this.cslist2[a].type,
                            "addr":this.cslist2[a].addr,
                            "ready":0
                        }
                        params.setdevinfo.push(st)
                    }
                }
                // 接口下发数组整理 
                this.$http.post(this.$baseUrl, params).then((res) => {
                    if(res.data.result == 'ok'){
                        this.$notify({
                            title: '所有设备已停用',
                            type: 'success',
                            duration: 1500
                        });
                    }else{
                        this.$notify({
                            title: '保存失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }
                });
            }).catch(() => {
                this.$notify({
                    title: '已取消',
                    type: 'warning',
                    duration: 1500
                });        
            });
        },
        //暂停走接口
        getDataStop(){
            console.log('暂停')
            clearInterval(this.timeGetData);
            this.timeGetData = null;
        },
        //开始走接口
        getDataStart(){
            this.getList()
            this.$nextTick(() => {
                this.timeGetData = setInterval(() => {
                    this.getList()
                }, 3000); 
            })
        },
        getList(){
            this.cslist = []
            var params = {
                "getdevlink":"",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                var getdevlink = res.data.getdevlink
                if(getdevlink == undefined){//返回结果：{'result':'error(404)'}
                }else{
                    for(var a = 0; a < getdevlink.length; a++){
                        for(var b = 0; b < getdevlink[a].devlink.length; b++){
                            var link = {
                                type: getdevlink[a].type,//类型编号
                                typename: getdevlink[a].typename,//类型名称
                                ready:getdevlink[a].devlink[b].ready,//使能
                                uid:getdevlink[a].devlink[b].uid,//设备唯一编号
                                addr:getdevlink[a].devlink[b].addr,//地址
                                name:getdevlink[a].devlink[b].name,//设备名称
                                ver:getdevlink[a].devlink[b].ver,//设备版本号
                                des:getdevlink[a].devlink[b].des,//备注
                                ip:getdevlink[a].devlink[b].ip,//ip地址
                                mask:getdevlink[a].devlink[b].mask,//子网掩码
                                gw:getdevlink[a].devlink[b].gw,//网关
                                port:getdevlink[a].devlink[b].port,//端口号
                                flash:getdevlink[a].devlink[b].flash,//定位
                                linktime:getdevlink[a].devlink[b].linktime,//连接时间
                                connecttime:getdevlink[a].devlink[b].connecttime,//设备连接到主机的时间 接入时间
                                checktime:getdevlink[a].devlink[b].checktime/1000,   //主机访问终端的循环时间 访问时间间隔
                            }
                            this.cslist.push(link)
                        }
                    }
                    let dataInfo = {};
                    var id = 0;
                    this.cslist.forEach((item, index) => {
                        var str = {
                            type:item.type,//类型编号
                            typename:item.typename,//类型名称
                            addr:item.addr,
                            flash:item.flash,
                            checktime:item.checktime,
                            connecttime:this.formatDate(item.connecttime*1000, 'YYYY-MM-DD H:m:s'),
                            des:item.des,
                            gw:item.gw,
                            ip:item.ip,
                            linktime:item.linktime,
                            mask:item.mask,
                            name:item.name,
                            port:item.port,
                            ready:item.ready,//开启关闭
                            uid:item.uid,
                            ver:item.ver,
                            id:id++
                        }
                        let { type } = str;
                        if (!dataInfo[type]) {
                            dataInfo[type] = {
                                type,
                                typename:str.typename,
                                id:id++,
                                children: []
                            }
                        }
                        dataInfo[type].children.push(str);
                    });
                    var list = [] //建立空数组方便刷新获取数据，防止列表闪空
                    var arr = Object.values(dataInfo);
                    for(var i = 0; i < arr.length; i++){
                        for(var y = 0; y < arr[i].children.length; y++){
                            if(arr[i].children[y].ready == 1){
                                arr[i].children[y].ready = true
                            }else if(arr[i].children[y].ready == 0){
                                arr[i].children[y].ready = false
                            }
                            list.push(arr[i].children[y])
                        }
                    }
                    this.cslist2 = list 
                    var list3 = []
                    for(var c = 0; c < this.cslist2.length; c++){
                        if(this.cslist2[c].linktime <= 2000){
                            list3.push(this.cslist2[c])
                        }
                    }
                    this.cslist3 = list3
                }
                
            })

            
        },
        handleDelete() { //删除
            this.$confirm('此操作将永久一键删除所有设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('1111')
                var str = []
                for(var i = 0; i < this.cslist2.length; i++){
                    var arr = {
                        "uid":this.cslist2[i].uid,
                        "type":this.cslist2[i].type,
                        "addr":this.cslist2[i].addr
                    }
                    str.push(arr)
                }
                var params = {
                    "deletedev":str,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.loading = true
                var time = ((this.cslist2.length)*500)+1000
                var timer = setTimeout(() => {
                    if(this.loading == true){
                        this.loading = false
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }
                }, time);
                this.$http.post(this.$baseUrl, params).then((res) => {
                    // 清除定时器
                    clearTimeout(timer);
                    this.loading = false
                    if(res.data.result == 'ok'){
                        this.$notify({
                            title: '删除成功',
                            type: 'success',
                            duration: 1500
                        });
                    }else{
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }
                });
            }).catch(() => {
                console.log('error')
                this.$notify({
                    title: '已取消删除',
                    type: 'warning',
                    duration: 1500
                });        
            });
        },
        save(){
            this.layout0.dhcpfip = this.form.ipStart//起始地址
            this.layout0.dhcplip = this.form.ipend//终止地址
            this.layout0.dhcpgw = this.form.gateway//网关
            this.layout0.dhcpmask = this.form.mask//子网掩码
            this.layout0.dhcpport = this.form.port//端口号
            var params = {
                "setlayout":"layout0",
                "layout":JSON.stringify(this.layout0),
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                   if(res.data.result == 'ok'){
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 1500
                        });
                        this.dialogVisible = false
                        if(this.layout0.dhcpenable == 0){
                            // 自动状态需要设备扫描
                            this.scan()
                        }
                    }else{
                        this.$notify({
                            title: '保存失败',
                            type: 'warning',
                            duration: 1500
                        }); 
                    }
            });
        }
    },
     // 清除定时器
    beforeDestroy() {
        // 停止循环接口
        clearInterval(this.timeGetData);
        this.timeGetData = null;
        // 停止循环接口
        clearInterval(this.timeSysData);
        this.timeSysData = null;
        // 关闭定位
        let flashData = JSON.parse(localStorage.getItem("定位"))
        if(flashData == null || flashData == undefined || flashData == "null" || flashData == "undefined"){
            
        }else{
            var params = {
                "setdevinfo":[
                    {
                        "uid":flashData.uid,
                        "type":flashData.type,
                        "addr":flashData.addr,
                        "flash":0
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {

            })
        }
        
       
    },
}
</script>

<style scoped>
    .color_red{
        color: #ca505f !important
    }
    .allsave{
        float: right;
        margin: 30px 0px;
    }
    /deep/ .el-dialog__title{
        color: #fff;
    }
    /deep/ .el-button{
        color: #fff;
    }
    /deep/ .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
        color: #b8bcc2;
        background-color: #8e98a170;
        border-color: #8e98a170;
    }
    /* 表格背景 */
    /deep/ .el-table, .el-table__expanded-cell{
        background: none !important;
    }
    /deep/ .el-table tr{
        background-color: #48698796 !important;
    }
    /deep/ .el-table thead{
        color: #fff !important;
    }
    /deep/ .el-table{
        color: #fff !important;
    }
    /deep/ .el-table th, .el-table tr {
        background-color: #ffffff2b !important;
    }
    .table_wrap{
        height: 900px;
        overflow-y: scroll;
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #1515152e !important;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .el-icon-edit-outline{
        font-size: 25px;
        cursor: pointer;
        position: relative;
        top: 2px;
    }
    .el-icon-edit-outline:hover{
        color: #409EFF;
    }
    .el-icon-delete{
        font-size: 24px;
        cursor: pointer;
        position: relative;
        top: -1px;
        margin-left: 22px;
    }
    .el-icon-delete:hover{
        color: #c00000;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before{
        background-color: #ebeef500 !important;
    }
    .el-table__expand-icon{
        color: #fff
    }
    /deep/  .el-button {
    background: rgba(89, 129, 165, 0.8);
    border: none;
}
/* .el-table .cell{
    display: flex;
    align-items: center;
} */
/deep/ .table_wrap .el-input__inner {
        background: none !important;
        color: #fff;
        border: none;
        /* width: 590px; */
        display: inline !important;
    }
/deep/ .table_wrap .el-input.is-disabled .el-input__inner{
    color: #8b8f99;
}
/deep/ .con_table .el-input__inner{
    padding: 0px;
}
/deep/ .el-switch.is-checked .el-switch__core::after{
    top: 1.5px;
}
.consetjb{
    background-color: #63809aad;
    border: 1px solid #9baebfad;
    color: #fff;
    position: absolute;
    right: 95px;
    top: 12px;
    z-index: 2;
    padding:5px 10px
}
.conlist_time{
    margin-left: 10px;
    cursor: default;
}
.caozuo{
    display: flex;
    align-items: center;
}
.confixed{
    cursor: pointer;
}
.confixed .el-icon-location{
    font-size: 20px;
}
.confixed .el-icon-thumb{
    font-size: 12px;
    position: relative;
    left: -7px;
    color: #ffffff80;
}
.confiexd_warning{
    animation:  mycolorchange2 1.5s infinite;
    animation-timing-function: linear;
}
@keyframes mycolorchange2{
    0%{
        color: transparent;
    }
    30%{
        color: #79ff20;
    }
    50%{
        color: #c4f19a
    }
    70%{
        color: #dbf858;
    }
    100%{
        color: #79ff20;
    }
}
    /* 标题 */
    .config_title{
        padding: 0px 30px 20px 30px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
    }
    .config_title_flex{
        display: flex;
        align-items: center;
        height: 100%;
        /* justify-content: space-between; */
    }
    .config_title_set{
        height: 100%;
        margin-top: 4px;
        display: flex;
        align-items: center;
        align-content: center;
        text-align: center;
        background-color: #6b89a93b;
        border-radius: 5px;
    }
    .config_title_zi{
        letter-spacing: 3px;
        font-size: 22px;
        margin-right: 40px;
    }
    .config_title_set .el-switch{
        position: relative;
        top: 2px;
    }
    .conspangray{
        width: 100px;
        font-size: 14px;
        color: #959598;
    }
    .conspanliang{
        width: 100px;
        font-size: 14px;
        color: #fff;
    }
    .consetip{
        background-color: #fff0;
        border: 1px solid #ffffff7d;
        color: #fff;
    }
    .consetip:hover{
        background-color: #486885ad;
    }
     .config_title_add .el-icon-circle-plus-outline:hover{
         color: #409EFF;
     }
     .config_title2{
        padding: 30px 30px 10px 30px;
    }
    .config_title2_zi{
        width: 100%;
        letter-spacing: 3px;
        font-size: 22px;
    }
    .config_title2_add{
        float: right;
        font-size: 30px;
        cursor: pointer;
    }
     .config_title2_add .el-icon-circle-plus-outline:hover{
         color: #409EFF;
     }
     /deep/ .el-form-item__label{
        color: #fff;
    }
    .config_form{
        width: 400px;
    }
    .zhushi{
        color: #ffa143;
        font-size: 12px;
        margin-left: 5px;
    }
</style>